import React, { useCallback, useMemo } from 'react'
import { Layout, Menu } from 'antd';

import { MenuConfig, IMenuType } from './menu'

import { Link } from 'react-router-dom'

const { SubMenu } = Menu;
const { Sider } = Layout;


interface IProps {
  collapsed: boolean
}

const MySlider: React.FC<IProps> = function (props) {
  const getMenuTreeFromAry = useCallback((data: IMenuType[]): JSX.Element[] => {
    return data.map((item: IMenuType): JSX.Element => {
      let Icon = item.icon;
      if (item.children) {
        return <SubMenu key={item.key} title={item.title} icon={Icon ? <Icon /> : ''}>
          {getMenuTreeFromAry(item.children)}
        </SubMenu>
      } else {
        return <Menu.Item key={item.key} icon={Icon ? <Icon /> : ''}>
          <Link to={item.key}>
            <span>{item.title}</span>
          </Link>
        </Menu.Item>
      }
    })
  }, [])

  let treeDom = useMemo(() => {
    return getMenuTreeFromAry(MenuConfig)
  }, [MenuConfig]);
  return <Sider width={200} className="site-layout-background"
    collapsed={props.collapsed}>
    <Menu
      mode="inline"
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      style={{ height: '100%', borderRight: 0 }}
    >
      {treeDom}
    </Menu>
  </Sider>
}

export default MySlider



/// 怎么根据权限去实现 menu展示？
// 1 - 在menu.ts中 每一项都去添加一个level 去告诉我们当前路径的所需权限
// 2 - Mysilider中 产生TREE结构的时候  加一层权限的判断即可